<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .img {
                width:300px;
                height:300px;
                margin:20px auto;
                background:#00f;
            }
            .img1 {
                position:relative;
            }
            .img1 img {
                position:absolute;
                top:0;
                bottom:0;
                left:0;
                right:0;
                margin:auto;
            }
            .img2 {
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex-box;
                display:flex;
                -webkit-box-align:center;
                -ms-flex-align:center;
                align-items:center;
                -webkit-box-pack:center;
                -ms-flex-pack:center;
                justify-content:center;
                text-align:center;
            }
            .img3 .iCenter {
                display:table-cell;
                vertical-align:middle;
                text-align:center;
                height:300px;
                width:300px
            }
            .img3 img {
                vertical-align:middle;
                display:inline-block
            }
            .img4 {
                text-align:center
            }
            .img4 img {
                vertical-align:middle
            }
            .img4 .iblock {
                display:inline-block;
                height:100%;
                width:0;
                vertical-align:middle
            }
        </style>
    </head>
    <body>
        <h2>演示1</h2>
        <p>1.相对定位+margin:auto</p>
        <div class="img img1">
        <img src="http://dummyimage.com/200x200/f66/"/>
        </div>
        <h2>演示2</h2>
        <p>2.flexbox</p>
        <div class="img img1">
            <img src="http://dummyimage.com/200x200/f66/"/>
        </div>
        <h2>演示3</h2>
        <p>3.table-cell</p>
        <div class="img img1">
            <span class="iCenter"><img src="http://dummyimage.com/200x200/f66/"/></span>
        </div>
        <h2>演示4</h2>
        <P>4.增加一个空白标签</P>
        <div class="img img1">
            <span class="iCenter"><img src="http://dummyimage.com/200x200/f66/"/></span>
            <i class="iblock"></i>
        </div>
        <script>
            
        </script> 
    </body>
</html>